<?php

namespace App\Admin\Grid\Displayers;

use Dcat\Admin\Admin;
use Dcat\Admin\Grid\Displayers\AbstractDisplayer;
use Dcat\Admin\Grid\Displayers\Editable;
use Dcat\Admin\Support\Helper;

class  NewEditable extends Editable
{

    protected function addStyle()
    {
        $color = Admin::color()->link();
        $primary = Admin::color()->primary();
        $selector = $this->getSelector();

        Admin::style(
            <<<CSS
.{$selector}{border-bottom:dashed 1px $color;color: $color;display: inline-block; -webkit-user-modify: read-write-plaintext-only;white-space: normal;max-width: 200px;max-height:100px;overflow-y: auto;}
.{$selector}:focus {min-width:50px;}
.{$selector}+.save{margin-left: 0.4rem;color: $color}
body.dark-mode .{$selector}{color: $primary;border-color: $primary;}
body.dark-mode .{$selector}+.save{color: $primary}
CSS
        );
    }

    protected function addScript()
    {
        $selector = $this->getSelector();

        $script = <<<JS
        var submiting = false;
        var handleSubmit = function (obj) {
            if (submiting) return;
            submiting = true;
            var url = obj.data('url'),
                name = obj.data('name'),
                refresh = obj.data('refresh'),
                old_value = obj.data('value'),
                value = obj.prev().html(),
                tmp = obj.next();

            tmp.html(value);

            value = tmp.text().replace(new RegExp("<br>","g"), '').replace(new RegExp("&nbsp;","g"), '').trim();
            var data = {};
            if (name.indexOf('.') === -1) {
                data[name] = value;
            } else {
                name = name.split('.');

                data[name[0]] = {};
                data[name[0]][name[1]] = value;
            }

            Dcat.NP.start();
            $.put({
                url: url,
                data: data,
                success: function (d) {
                    var msg = d.data.message || d.message;
                    if (d.status) {
                        obj.attr('data-value',value).addClass("hidden").prev().html(value);
                        Dcat.success(msg);

                        refresh && Dcat.reload()
                    } else {
                        obj.prev().html(old_value);
                        Dcat.error(msg);
                    }
                },
                error: function(a,b,c) {
                    obj.prev().html(old_value);
                    Dcat.handleAjaxError(a, b, c);
                },
                complete:function(a,b) {
                    submiting= false;
                    Dcat.NP.done();
                }
            });

            return false;
        };

;$(".{$selector}").on("click focus", function() {
    $(this).next().removeClass("hidden");
}).on('blur', function () {
    var icon = $(this).next();
    setTimeout(function () {
        handleSubmit(icon)
        icon.addClass("hidden")
    }, 200)
});
$('.{$selector}+.save').on("click",function() {
    handleSubmit($(this))
});
JS;

        Admin::script($script);
    }

    public function display($refresh = false)
    {
        $this->addScript();
        $this->addStyle();
        $selector = $this->getSelector();
        $value = Helper::render($this->value);

        $label = __('admin.save');

        return <<<HTML
<div class="d-inline">
    <span class="{$selector}" contenteditable="true">{$value}</span>
    <span class="save hidden"
        data-value="{$this->value}"
        data-name="{$this->column->getName()}"
        data-id="{$this->getKey()}"
        data-refresh="{$refresh}"
        data-url="{$this->getUrl()}">
        {$label}
    </span>
    <div class="d-none"></div>
</div>
HTML;
    }
}
